<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>

<h1>注册页面</h1>

<form id="registerForm" method="post" enctype="multipart/form-data">

    账号：<input type="text" name="username" id="username"/><span id="usernameInfo"></span><br/>
    密码：<input type="password" name="password"/><br/>
    姓名：<input type="text" name="name"/><br/>
    年龄：<input type="text" name="age"/><br/>
    性别：
    <input type="radio" name="sex" value="man" checked="checked"/>男
    <input type="radio" name="sex" value="woman"/>女
    <br/>
    爱好：
    <input type="checkbox" name="hobbies" value="football"/>足球
    <input type="checkbox" name="hobbies" value="basketball"/>篮球
    <input type="checkbox" name="hobbies" value="shop"/>购物
    <br/>
    上传头像：<input type="file" name="photo"/><br/>
    籍贯：
    <select id="province" name="province">
        <option value="xxx">-- 请选择 --</option>
    </select>省
    <select id="city" name="city">
        <option value="xxx">-- 请选择 --</option>
    </select>市
    <br/>

    <input type="submit" value="注册"/>
    <input type="button" value="返回" onclick="goWelcome()"/>
</form>

<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function goWelcome() {
        window.location = "welcome.html";
    }

    $(function (){

        $("#registerForm").submit(function (event){

            event.preventDefault();

            let formData = new FormData(this);

            $.ajax(
                {
                    type:"post",
                    url:"student?action=doRegister",
                    processData:false,//不设置处理数据，因为使用了FormData对象
                    contentType:false,//不设置内容类型，表单上设置了
                    data:formData,
                    async:true,
                    success:function (data){
                        if (data == "1"){
                            window.location = "index.html"
                        }else if (data == "-1"){
                            alert("注册失败");
                        }
                    }
                }
            )


        })

        $("#username").blur(function (){
            let v = $(this).val();
            if (v.length != 0){
                $.post(
                    "student?action=isRegister",
                    {"username":v},
                    function (data){
                        if (data == "1"){
                            $("#usernameInfo").css("color","green");
                            $("#usernameInfo").text("恭喜，账号可用");
                        }else if (data == "-1"){
                            $("#usernameInfo").css("color","red");
                            $("#usernameInfo").text("抱歉，账号已被注册");
                        }
                    }
                );
            }
        })

        function showProvince(){
            $.get(
                "province",
                {"action":"getProvinces"},
                function (data){
                    let provinceArr = eval(data);
                    for (let i = 0;i<provinceArr.length;i++){
                        let code = provinceArr[i].code;
                        let name = provinceArr[i].name;
                        let option = $("<option></option>");
                        $(option).val(code);
                        $(option).text(name)
                        $("#province").append(option)
                    }
                }
            )
        }
        showProvince();

        $("#province").change(function (){
            let v = $(this).val();
            if (v == "xxx"){
                $("#city").html("<option value='xxx'>-- 请选择 --</option>");
            }else{
                $.get(
                    "province",
                    {"action":"getCities","code":v},
                    function (data){
                        //先清空城市列表
                        $("#city").html("");

                        //解析json数据
                        let cityArr = eval(data);
                        for (let i = 0;i<cityArr.length;i++){
                            let code = cityArr[i].code;
                            let name = cityArr[i].name;
                            let option = $("<option></option>");
                            $(option).val(code);
                            $(option).html(name);
                            $("#city").append(option);
                        }
                    }
                )
            }
        })
    })
</script>
</body>
</html>